/*
 * @Author: jiu yin
 * @Date: 2024-06-20 19:10:12
 * @LastEditTime: 2024-07-02 16:08:30
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\liveApp\component\AddShop.tsx
 * jiu
 */
import { useState, useEffect } from "react";
import Modal_edit from "@/comment/modal_edit";
import { Button, Pagination, message } from "antd";
import { shop_application, add_application } from "@/api/home";
import {b_to_mb} from "@/utils"

export default function AddShop(props: any) {
	let { isModalOpen ,reload} = props;
	let [params, set_params] = useState({ page: 1, total: 100 });
	let [data_list, set_data_list] = useState([] as any);
	let [is_add, set_is_add] = useState(false);
	useEffect(() => {
		shop_application({ page: params.page, limit: 6 }).then((res: any) => {
			set_data_list(res.data.data);
			set_params({ ...params, total: res.data.total });
		});
	}, [params.page, is_add]);

	return (
		<Modal_edit title={"场景应用商店"} width={950} isModalOpen={isModalOpen} handleCancel={reload}>
			<section>
				<ul className="grid grid-cols-3 gap-20px">
					{data_list.map((item: any, index: number) => (
						<li className="w-280px border-rd-10px bg-#F7F8FF overflow-hidden" key={index}>
							<img
								src={item.cover_url}
								alt=""
								className="w-full h-154px"
							/>
							<div className="p-16px">
								<p className="c-#161940 font-700">{item.name}</p>
								<p className="mt-5px text-14px c-#5C5F7A">{item.describe}</p>
								<div className="text-14px c-#9697A9 flex mt-12px">
									<p className="flex">
										最大成员<span className="c-#161940 ml-8px w-70px">{item.max_num}人</span>
									</p>
									<p className="flex">
										时长<span className="c-#161940 ml-8px ">{item.exp_duration}min</span>
									</p>
								</div>

								<div className="text-14px c-#9697A9 flex mt-12px">
									<p className="flex">
										场景大小
										<span className="c-#161940 ml-8px w-70px">
										{b_to_mb(item.size)}MB
										</span>
									</p>
									<p className="flex">
										版本<span className="c-#161940 ml-8px">V{item.Latest_version}</span>
									</p>
								</div>
							</div>
							<div className="flex justify-center mb-16px">
								{item.is_add ? (
									<Button type="primary" disabled>
										已添加
									</Button>
								) : (
									<Button
										type="primary"
										onClick={async () => {
											await add_application({ application_id: item.application_id });
											message.success("添加成功");
											set_is_add(!is_add);
										}}>
										添加部署
									</Button>
								)}
							</div>
						</li>
					))}
				</ul>

				<section className="flex justify-center mt-20px">
					<Pagination
						defaultCurrent={params.page}
						total={params.total}
						pageSize={6}
						hideOnSinglePage={true}
						showSizeChanger={false}
						onChange={e => set_params({ ...params, page: e })}
					/>
				</section>
			</section>
		</Modal_edit>
	);
}
